<style type="text/css">
    .left-panel {
        float: left;
        width: 75%;
    }

    .right-panel {
        float: right;
        width: 20%;
        padding-left: 40px;
    }
</style>

<script type="text/javascript" src="<?php echo Yii::app()->baseUrl ?>/scripts/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
    window.onload = function()
    {
        CKEDITOR.replace( 'description',{height: 450,} );

    }
</script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl ?>/scripts/jquery/jquery.min.js"></script>
<script type="text/javascript">

    $(document).ready(function(){
        var status = '<?php echo $data['status']; ?>';
        $('#status').val(status);


        var hot_status = '<?php echo $data['hot_status']; ?>';
        $('#hot_status').val(hot_status);

        var brand = '<?php echo $data['brand']; ?>';
        $('#brand').val(brand);

        var size  = '<?php echo $data['size']; ?>';
        $('#size').val(size);

        var material = '<?php echo $data['material']; ?>';
        $('#material').val(material);

        var color = '<?php echo $data['color']; ?>';
        $('#color').val(color);

        var weight = '<?php echo $data['color']; ?>';
        $('#color').val(color);

        $('#create_post').click(function(){

            var related_products = $('.related_products:checked');
            var len = related_products.length;
            var related_products_string = '';
            if(len != 0){
                for(i=0;i<len;i++){
                    related_products_string += related_products[i].value + ';';
                }
                if($("#related_products").val() == ''){
                    related_products_string = related_products_string.slice(0,-1);
                }else{
                    related_products_string += $("#related_products").val();
                }

                $("#related_products").val(related_products_string);
            }


            categories = $(".category:checked");
            number_category = categories.length;
            category_id_string = ';'
            if(number_category != 0){
                for(i=0;i<number_category;i++){
                    category_id_string += categories[i].value + ';';
                }


                $("#category_id").val(category_id_string);
            }



            $('form').get(0).setAttribute('action','?r=product/edit&id=<?php echo $data['id'];?>');
            $('form').submit();
        });

        $("#search_box").keyup(function(e){
            if(e.keyCode == 13 ){
                search_string = $('#search_box').val();
                dataString = 'search_string='+search_string;
                $.ajax({
                    type: 'post',
                    url: '?r=product/create',
                    data: dataString,
                    dataType: "html",
                    success: function(data){
                        document.getElementById("search_result").innerHTML = '';
                        document.getElementById("search_result").innerHTML = data;
                    }
                });
            }
        })

    });

</script>

<form name="create_form" id="create_form" onkeypress="return event.keyCode != 13;" method="POST" action="javascript:void(0)" enctype="multipart/form-data">
    <div class="left-panel">
        <h3>Thông tin cơ bản</h3><hr />
        <table>
            <tr>
                <td><label for="normal">Tên sản phẩm</label></td>
                <td><label for="normal">Slug</label></td>
            </tr>
            <tr>
                <td><input name="name" id="name"  type="text" size="70" style="width:320px"  value="<?php echo $data['name']?>"></td>
                <td><input type="text" name="slug" id="slug" style="width:320px" value="<?php echo $data['slug']?>" ></td>
            </tr>
            <tr>
                <td><label for="normal">Giá</label></td>
                <td><label for="normal">Giá khuyến mãi</label></td>
            </tr>
            <tr>
                <td><input name="price" id="price" value="<?php echo $data['price']?>" type="text" size="70" style="width:320px" ></td>
                <td><input type="text" name="price_sale_off" id="price_sale_off" value="<?php echo $data['price_sale_off']?>" style="width:320px"></td>
            </tr>
            <tr>
                <td><label for="normal">Số lượng</label></td>
                <td><label for="normal">Tags</label></td>
            </tr>
            <tr>
                <td><input type="text" name="number" id="number" value="<?php echo $data['number']?>" style="width:320px"></td>
                <td><input name="tags" id=""  type="text" size="70" value="<?php echo $data['tags']?>" style="width:320px"></td>
            </tr>

        </table>


        <br />
        <label for="normal">Khuyến mãi</label>
        <textarea  id="promotion" name="promotion" rows="3" style="width: 98%"><?php echo $data['promotion']?></textarea>
        <label for="normal">Mô tả sản phẩm</label>
        <textarea  id="description" name="description" rows="12" style="width: 98%"><?php echo $data['description']?></textarea>

        <br />
        <div style="display: none">
            <label for="normal">Tìm kiếm sản phẩm liên quan</label>
            <input id="search_box"type="text" placeholder="Tìm kiếm sản phẩm liên quan"/>
            <input name="related_products" id="related_products" type="hidden"/>
            <div id="search_result">
                <?php
                if($data['related_products'] != ''){
                    $related_id = explode(';', $data['related_products']);
                    foreach($related_id as $id){
                        if($id != ''){
                            $products = ProductModel::model()->findByPk($id , "status = 'active'",array('id','name','slug'));
                            if($products != null){
                                echo '
                                <tr>
                                    <td><input type="checkbox" checked="checked" class="related_products" value="'.$products->id.'"></td>
                                    <td><a href="'.$this->createUrl('product/view',array('id'=>$products->id,'slug'=>$products->slug)).'"><label>'.$products->name.'</label></a></td>
                                </tr>  
                                ';
                            }
                        }
                    }
                }else{
                    echo '<label>Chưa có bài viết liên quan.</label>';
                }
                ?>
            </div>

            <br/>
        </div>
        <input type="hidden" id="images" />
        <input type="hidden" id="icon" />
        <table border="0">
            <tr>
                <td>
                    <label for="normal">Hình đại diện sản phẩm</label>
                    <input name="product/thumb" id="thumb" type="file"  size="20" style="opacity: 0;">
                    <input type ="hidden" name="thumb" value="<?php echo $data['thumb']?>" id="thumb_url"/>
                </td>
            </tr>
            <tr>
                <td>
                    <div><img id="thumb_content" src="<?php echo $data['thumb']?>" style="width:200px;height:200px;margin-top:15px"/></div>
                    <div id="thumb_status"></div>
                </td>
            </tr>
        </table>
        <br />
        <label for="normal">Ảnh sản phẩm</label>
        <input name="product/images" id="screenshot" class="screenshot" type="file"  size="20" style="opacity: 0;">
        <div id="screenshots_status"></div>
        <input type="hidden" name="images" id="screenshots_url" type="text" value="<?php echo $data['images']?>"/>
        <table>
            <tr>
                <td id="screenshots_content" align="center">

                    <?php
                    if($data['images'] != '' && $data['images'] != null){
                        $images = explode(';', $data['images']);
                        foreach($images as $image){
                            if($image != ''){
                                $screenshot = '<div id="'.$image.'" style="float:left;margin:10px 10px 0px 0px;width:100px;">';
                                $screenshot .='<img src="'.$image.'" class="screenshot_image" style="width:100px;height:100px;" ></img>';
                                $screenshot .='<a href="javascript:void(0)" title="'.$image.'" onclick="removeScreenshot(this.title);">Remove</a>';
                                $screenshot .='</div>';
                                echo $screenshot;
                            }
                        }
                    }
                    ?>
                </td>
            </tr>
        </table>

        <span style="clear:left"></span>
        <br />



        <br /><br />
        <center>
            <button class="btn" id="create_post" href="#"><span class="icon16 icomoon-icon-cog"></span> Update product</button>
            <button class="btn" id="cancel" href="?r=product"><span class="icon16 icomoon-icon-cog"></span> Cancel</button>
        </center>
    </div>
    <div class="right-panel">
        <h3>Thông tin liên quan </h3><hr />

        <label for="normal" style="width:225px">Chọn danh mục sản phẩm</label>
        <div style="width: 225px">
            <input type="hidden" name="category_id" id="category_id"/>
            <?php

            function build_table_category($category_tree,$table = '',$category_arr){
                if(count($category_tree) != 0){
                    $table .= '<ul style="list-style: none">';
                    foreach($category_tree as $cate){
                        $checktype = '';
                        if(in_array($cate['id'],$category_arr)){
                            $checktype = 'checked="checked"';
                        }
                        $table .= '<li>';
                        $table .= '<label><input type="checkbox" '.$checktype.' class="category" id="'.$cate['id'].'" value="'.$cate['id'].'"/>'.$cate['name'].'</label>';
                        if(isset($cate['children'])){

                            $table = build_table_category($cate['children'],$table,$category_arr);

                        }
                        $table .= '</li>';

                    }
                    $table .= '</ul>';
                }
                return $table;
            }

            $category_arr = explode(';',$data['category_id']);
            echo build_table_category($pagevals['category_tree'],'',$category_arr);
            ?>



        </div>


        <br /><br />

        <label for="normal" style="width:225px">Trạng thái</label>
        <select name="status" id="status" style="opacity: 0;">
            <option value="pending" selected="selected">Pending</option>
            <option value="approved">Approved</option>
            <option value="active">Active</option>
            <option value="blocked">Blocked</option>
        </select><br /><br />

        <label for="normal" styl>Sản phẩm Hot?</label>
        <select name="hot_status" id="hot_status" style="opacity: 0;">
            <option value="0">No</option>
            <option value="1" selected="selected">Yes</option>
        </select><br /><br />

        <label for="normal">Nhãn hiệu</label>
        <select name="brand" id="brand" style="opacity: 0;">
            <?php
            if(count($pagevals['selection_label']['brand']) != 0){
                foreach($pagevals['selection_label']['brand'] as $key=> $value){
                    echo '<option class="selection_label" value="'.$value.'">'.ucfirst($value).'</option>';
                }
            }
            ?>
        </select><br /><br />
        <input type="text" name="new_brand" id="new_brand" value="" style="width:182px" placeholder="Nhãn hiệu"/>
        <br /><br />

        <label for="normal">Màu sắc</label>
        <select name="color" id="color" style="opacity: 0;">
            <?php
            if(count($pagevals['selection_label']['color']) != 0){
                foreach($pagevals['selection_label']['color'] as $key=> $value){
                    echo '<option class="selection_label" value="'.$value.'">'.ucfirst($value).'</option>';
                }
            }
            ?>
        </select><br /><br />
        <input type="text" name="new_color" id="new_color" value="" style="width:182px" placeholder="Màu sắc"/>
        <br /><br />

        <label for="normal">Chất liệu</label>
        <select name="material" id="material" style="opacity: 0;">
            <?php
            if(count($pagevals['selection_label']['material']) != 0){
                foreach($pagevals['selection_label']['material'] as $key=> $value){
                    echo '<option class="selection_label" value="'.$value.'">'.ucfirst($value).'</option>';
                }
            }
            ?>
        </select><br /><br />
        <input type="text" name="new_material" id="new_material" value="" style="width:182px" placeholder="Chất liệu"/>
        <br /><br />



        <label for="normal">Size</label>
        <select name="size" id="size" style="opacity: 0;">
            <?php
            if(count($pagevals['selection_label']['size']) != 0){
                foreach($pagevals['selection_label']['size'] as $key=> $value){
                    echo '<option class="selection_label" value="'.$value.'">'.ucfirst($value).'</option>';
                }
            }
            ?>
        </select><br /><br />
        <input type="text" name="new_size" id="new_size" value="" style="width:182px" placeholder="Size"/>
        <br /><br />

        <label for="normal">Khối lượng</label>
        <select name="weight" id="weight" style="opacity: 0;">
            <?php
            if(count($pagevals['selection_label']['weight']) != 0){
                foreach($pagevals['selection_label']['weight'] as $key=> $value){
                    echo '<option class="selection_label" value="'.$value.'">'.ucfirst($value).'</option>';
                }
            }
            ?>
        </select><br /><br />
        <input type="text" name="new_weight" id="new_weight" value="" style="width:182px" placeholder="Khối lượng"/>
        <br /><br />

    </div>
    <span style="clear: both"></span>
</form>